import React from 'react';
import ReactToPrint from 'react-to-print';

import { connect } from 'dva';

import { Header, ReportC, MyTitle, MyButton } from '../styled';

import { Table, Typography, Divider, Row, Col } from 'antd';

import RectifiedRiskList from '../components/RectifiedRiskList'
import RiskList from '../components/RiskList'

import { column } from '../enum'

import styles from '../style.less'

const { Title, Paragraph, Text } = Typography;


@connect(({ analyse_check, user }) => ({
  data: analyse_check.details || {},
  user: user.details || {}
}))
class ComponentToPrint extends React.Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({ type: 'analyse_check/queryDetails', payload: match.params.id })
  }
  render() {
    const { user = {}, data = {} } = this.props;
    const data1 = [{
      key: '1',
      type: '火警数',
      last: data.alarmFireCountLastMonth,
      next: data.alarmFireCount
    }, {
      key: '2',
      type: '故障',
      last: data.alarmMalfunctionCountLastMonth,
      next: data.alarmMalfunctionCount
    }, {
      key: '3',
      type: '告警',
      last: data.alarmWarningCountLastMonth,
      next: data.alarmWarningCount
    }, {
      key: '4',
      type: '其他',
      last: data.alarmOtherCountLastMonth,
      next: data.alarmOtherCount
    }, {
      key: '5',
      type: '报警处理率',
      last: `${(+(data.alarmHandleRateLastMonth) * 100).toFixed(2)}%`,
      next: `${(+(data.alarmHandleRate) * 100).toFixed(2)}%`
    }]

    const data2 = [{
      key: '1',
      type: '设备总数',
      last: data.deviceTotalCountLastMonth,
      next: data.deviceTotalCount
    }, {
      key: '2',
      type: '设备故障数',
      last: data.deviceBadCountLastMonth,
      next: data.deviceBadCount
    }, {
      key: '3',
      type: '设备完好数',
      last: data.deviceGoodCountLastMonth,
      next: data.deviceGoodCount
    }, {
      key: '4',
      type: '设备故障率',
      last: `${(+(data.deviceBadRateLastMonth) * 100).toFixed(2)}%`,
      next: `${(+(data.deviceBadRate) * 100).toFixed(2)}%`
    }]
    return (
      <Typography style={{ paddingBottom: '50px', background: '#fff' }}>
        <Header>
          <MyTitle>{user.companyName || ''}</MyTitle>
          <MyTitle>{data.name || ''}</MyTitle>
        </Header>
        <ReportC>
          <Title level={4} style={{ margin: '50px 0 20px 0', color: '#333', fontSize: '20px' }}>报告简介</Title>
          <Paragraph>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Text strong style={{ fontSize: '16px' }}>{`《${user.companyName || ''}${data.name || ''}》`}</Text>是由宁波蓝成物联编写。本报告所涉及的反映<Text strong style={{ fontSize: '16px' }}>{user.companyName || ''}</Text>的消防安全状况的数据均基于本单位消防主机反馈数据以及本单位
            所安装的其他接入蓝成消防安全综合管控系统的物联设备的数据挖掘计算所得。
            </Paragraph>
          <Paragraph>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本报告版权为宁波蓝成物联科技有限公司所有，未经书面许可，任何机构和废人不得以任何形式翻版、复制和发布。如引用发布，需注明出处为“宁波蓝成物联科技有限公司”，且不得对本报告进行有悖原意的引用、
            删节和修改。本报告最终解释权归宁波蓝成物联科技有限公司所有。
            </Paragraph>
          <Divider />
          <Row>
            <Col span={10}>
              <Title level={4} style={{ margin: '50px 0 20px 0', color: '#333', fontSize: '20px' }}>消防主机运行情况</Title>
              <Table columns={column} dataSource={data1} bordered pagination={false} />
            </Col>
            <Col span={10} offset={2}>
              <Title level={4} style={{ margin: '50px 0 20px 0', color: '#333', fontSize: '20px' }}>消防设备设施完好情况</Title>
              <Table columns={column} dataSource={data2} bordered pagination={false} rowClassName={styles.tableRow} />
            </Col>
          </Row>
          <Divider />
          <Title level={4} style={{ margin: '50px 0 20px 0', color: '#333', fontSize: '20px' }}>消防设备设施完好情况</Title>
          <Col span={14}>
            <RectifiedRiskList data={data.rectifiedRiskList} />
          </Col>
          <Col span={6} offset={2}>
            <RiskList data={data.riskList} />
          </Col>
        </ReportC>
      </Typography>
    );
  }
}

@connect(({ analyse_check, user }) => ({
  data: analyse_check.details || {},
  user: user.details || {}
}))
class Report extends React.Component {

  handleAlarm = e => {
    e.preventDefault();
    const { dispatch, match, user, data } = this.props;
    dispatch({
      type: 'analyse_check/exportAlarm',
      payload: {
        id: match.params.id,
        name: `${user.companyName || ''}${data.name || ''}报警记录`,
      }
    })
  }

  handleDevice = e => {
    e.preventDefault();
    const { dispatch, match, user, data } = this.props;
    dispatch({
      type: 'analyse_check/exportDevice',
      payload: {
        id: match.params.id,
        name: `${user.companyName || ''}${data.name || ''}设备故障记录`,
      }
    })
  }

  render() {

    return (
      <section style={{ position: 'relative' }}>
        <ComponentToPrint ref={el => (this.componentRef = el)} match={this.props.match} />
        <ReactToPrint
          trigger={() => <MyButton style={{ right: '350px' }}>打印当前页面</MyButton>}
          content={() => this.componentRef}
        />
        <MyButton style={{ left: '350px' }} onClick={this.handleAlarm}>报警清单导出</MyButton>
        <MyButton style={{ left: 'calc(50% - 71px)' }} onClick={this.handleDevice}>设备故障清单导出</MyButton>
      </section>
    );
  }
}


export default Report;
